<template>
	<w-container id='wallet' class='plr-16' :loading="loading">
		<w-navbar navType="default" id="my-nav" title="我的钱包"></w-navbar>
		<template v-if="userInfo.show_wallet == 1">
			<view v-for="item in walletList" :key="item.title" :class="`wallet-card br-8 mt-16 ${item.icon}`">
				<view class="ptb-12 flex flex-ai-center">
					<w-icon :name="item.icon" :size="32"></w-icon>
					<text class="ml-10 font-size-16 font-w-500">{{ item.title }}</text>
				</view>
				<view class="bottom">
					<text class="font-size-14">{{ item.tips }}</text>
					<view class="status-btn font-color-white" @click="action(item)">
						{{ item.openstatus ? "进入钱包" : "立即开通" }}
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="flex flex-dir-col flex-ai-center flex-js-center" style="height: 80vh;">
				<view>{{handleLang('暂无权限')}}</view>
			</view>
		</template>
		<w-toast btnType="primary" v-model="servicePop" :title="servicePriceText" @action="actionServicePop"></w-toast>
	</w-container>
</template>

<script>
	import {
		getHuiFuInfo,
		openHuiFu,
		openYiBao,
		CreateHuifuAccountOrder
	} from '@/api/wallet/index.js';
	import PayUtil from '@/utils/payUtil.js';
	import {
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				servicePriceText: '',
				servicePop: false,
				loading: false,
				walletList: [
					{
						title: '钱包A',
						key: "huifu",
						authKey: "huifu_account",
						icon: "wallet-A",
						tips:"(安全便捷，交易更高效)"
					},
					{
						title: '钱包B',
						key: "",
						authKey: "",
						icon: "wallet-B",
						tips:"(大额度更畅通 免费开通)"
					},
					{
						title: '钱包C',
						key: "",
						authKey: "",
						icon: "wallet-C",
						tips:"(免费开通，更快更便捷)"
					},
					// {
					// 	title: '易宝',
					// 	key: "yibao",
					// 	authKey: 'yibao_status'
					// },
					// {
					// 	title: '快付通',
					// 	key: "kuaifutong",
					// 	authKey: "kuaifutong_account"
					// },
					// {
					// 	title: '连连',
					// 	openstatus:false,
					// 	key: 'lianlian'
					// },
					// {
					// 	title: '数字人民币',
					// 	openstatus: false,
					// 	key: 'shuzi_rmb'
					// }
				]
			};
		},
		onShow() {
			this.initInfo();
		},
		methods: {
			...mapActions('user', ['getUserInfo']),
			//获取开通状态
			initInfo() {
				this.loading = true;
				this.getUserInfo().then(userInfo => {
					this.walletList = this.walletList.map(v => {
						v.openstatus = userInfo[v.authKey]
						return v
					})
				}).finally(e => {
					this.loading = false;
				})
			},
			action(item) {
				if (!item.openstatus) {
					if (item.key == 'huifu') {
						this.openHuiFuWallet();
					} else if (item.key == 'yibao') {
						this.openYibao();
					} else {
						uni.showToast({
							icon: 'none',
							title: '该钱包暂不支持开户'
						})
					}
				} else {
					this.toWalletPage(item);
				}

			},
			openYibao() {
				uni.showToast({
					icon: 'none',
					title: '该地区暂时未开放~'
				})
				return
				uni.showLoading({
					title: '开户提交中'
				})
				openYiBao().then(res => {
					console.log(res, '后台返的');
					let {
						redirect_url
					} = res.data.info;
					this.toWeb(redirect_url);
				})
			},
			//钱包页面
			toWalletPage({
				key
			}) {
				let map = {
					huifu: getHuiFuInfo,
					yibao: openYiBao
				}
				let getInfoMethod = map[key]
				getInfoMethod().then(res => {
					let {
						redirect_url
					} = res.data.info;
					this.toWeb(redirect_url);
				})
			},
			//获取开户信息
			async openHuiFuWallet() {
				uni.showLoading({
					title: "请稍后..."
				})
				let res = await openHuiFu();

				if (res.data.mer_cust_id) {
					let {
						redirect_url
					} = res.data.info;
					let {
						resp_code,
						resp_desc
					} = res.data;
					if (resp_code == 'C00000') {
						this.toWeb(redirect_url)
					} else {
						uni.showToast({
							icon: 'none',
							title: resp_desc
						})
					}
				} else {
					this.servicePriceText = res.data.price
					this.servicePop = true
				}
			},
			// 给开通钱包手续费
			async actionServicePop(e) {
				if (!e) return;
				uni.showLoading()
				let param = await CreateHuifuAccountOrder();
				new PayUtil({
					pay_type: 4,
					pay_way: 'huifu',
					order_type: 4,
					order_number: param.data.order_sn
				})
			},
			toWeb(url) {
				// #ifdef H5
				window.location.href = url
				// #endif
				// #ifdef APP-PLUS
				console.log(url);
				const res = uni.getSystemInfoSync();
				// 获取平台信息
				let platform = res.platform;
				let _this = this
				if(platform == 'ios') this.openExternalLink(url)
				else {
					
					 // 定义需要请求的权限列表
					const permissions = [
						"android.permission.CAMERA",
						"android.permission. INTERNET ",
						"android.permission. RECORD_AUDIO ",
						"android.permission. MODIFY_AUDIO_SETTINGS ",
						"android.permission.READ_EXTERNAL_STORAGE",
						"android.permission.WRITE_EXTERNAL_STORAGE"
					];
					
					// 调用 plus.android.requestPermissions
					plus.android.requestPermissions(
						permissions,
						function(result) {
						  // 打开钱包
						  _this.openExternalLink(url)
						  // plus.runtime.openWeb(url)
						},
						function(error) {
							uni.showToast({
								icon:'none',
								title:error
							})
						  console.error("权限请求失败:", error);
						}
					)
				}
				// plus.runtime.openURL(url);
				// if (platform == 'ios') {
				// 	uni.setStorage({
				// 		key: 'url',
				// 		data: encodeURI(url),
				// 		success() {
				// 			uni.navigateTo({
				// 				url: '/pages/webview/webview-storage'
				// 			})
				// 		}
				// 	})
				// }else{
				// 	plus.runtime.openURL(url);
				// }

				






				// #endif
			},
			openExternalLink(url) {
				// 获取状态栏高度，适配iOS
				const statusbarHeight = plus.navigator.getStatusbarHeight();

				// 创建新的Webview窗口
				const newWebview = plus.webview.create(url, 'newWebviewId', {
					top: `${statusbarHeight}px`, // 适配状态栏高度
					bottom: '0px',
					render: 'always'
				});

				// 添加返回按钮
				const backButton = new plus.nativeObj.View('backButton', {
					top: `${10}px`, // 根据需要调整位置
					right: '120px',
					width: '70px',
					height: '30px',
				});

				// 绘制返回按钮背景
				backButton.drawRect({
					color: 'rgba(0,0,0,0.6)',
					radius: '5px'
				}, {
					top: '0px',
					left: '0px',
					width: '100%',
					height: '100%'
				});

				// 绘制返回按钮文字
				backButton.drawText('返回app', {
					top: '0px',
					left: '0px',
					width: '100%',
					height: '100%'
				}, {
					size: '16px',
					color: '#FFFFFF',
					align: 'center',
					verticalAlign: 'middle'
				});

				// 返回按钮点击事件
				backButton.addEventListener('click', function() {
					newWebview.close('slide-out-right', 300);
				});

				// 按钮拖动逻辑
				let startX, startY, initialLeft, initialTop;

				backButton.addEventListener('touchstart', function(event) {
					startX = event.touch.clientX;
					startY = event.touch.clientY;
					let position = backButton.getPosition();
					initialLeft = position.left;
					initialTop = position.top;
				});

				backButton.addEventListener('touchmove', function(event) {
					let deltaX = event.touch.clientX - startX;
					let deltaY = event.touch.clientY - startY;
					let newLeft = initialLeft + deltaX;
					let newTop = initialTop + deltaY;

					backButton.setStyles({
						left: `${newLeft}px`,
						top: `${newTop}px`
					});
				});

				// 将返回按钮添加到新Webview窗口
				newWebview.append(backButton);

				// 打开新的Webview窗口
				newWebview.show('slide-in-right', 300);
			}
		}
	}
</script>

<style lang="scss">
	page{ background-color: #fff; }
	.wallet-card {
		width: 686rpx;
		height: 224rpx;
		padding: 0 32rpx;
	
		.bottom {
			width: 100%;
			padding: 24rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.status-btn {
				width: 144rpx;
				height: 64rpx;
				border-radius: 50rpx;
				font-size: 26rpx;
				@extend .flex, .flex-center;
			}
		}
	}
	.wallet-A {
		background-color: #FFF2F1;
		color: #EE4C35;
		.bottom{
			border-top: 2rpx solid #F5D2CC;
		}
		.status-btn {
			background-color: #EE4C35;
		}
	}
	.wallet-B {
		background-color: #E1EEF6;
		color: #0F9BEA;
		.bottom{
			border-top: 2rpx solid #BFDCEE;
		}
		.status-btn {
			background-color: #0F9BEA;
		}
	}
	.wallet-C {
		background-color: #F0E7F8;
		color: #A75AF4;
		.bottom{
			border-top: 2rpx solid #BFDCEE;
		}
		.status-btn {
			background-color: #A75AF4;
		}
	}
</style>